1 files changed, 132 insertions, 0 deletions
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
new file mode 100644
index 00000000..5a36a755
--- /dev/null
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { Group } from '$lib/Database/groups';
+	import Message from '$lib/Loading/Message.svelte';
+	import tooltip from '$lib/Tooltip/tooltip';
+	import root from '$lib/Utility/root';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let groupsResponse: Promise<Response>;
+
+	onMount(async () => {
+		groupsResponse = fetch(root(`/api/events/group?slug=${data.group}`));
+	});
+
+	const asGroup = (group: any) => group as Group;
+</script>
+
+{#await groupsResponse}
+	<Message message="Loading group ..." />
+{:then group}
+	{#if group}
+		{#await group.json()}
+			<Message message="Parsing group ..." />
+		{:then json}
+			{#if json === null}
+				<Message message="" loader="ripple" slot>
+					This group may not exist. Please
+					<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+				</Message>
+			{:else}
+				{@const group = asGroup(json)}
+
+				<div
+					class="card"
+					id="user-grid"
+					style={`background-image: ${group.banner ? `url(${group.banner})` : 'none'}; padding: 0;`}
+				>
+					{#if group}
+						<img src={group.banner} alt="" id="cover-image" />
+					{/if}
+
+					<div class="card" id="user-grid-content">
+						<div id="user-grid-avatar">
+							<a href={`https://anilist.co/user/${group.anilist_username}`} target="_blank">
+								<img src={group.avatar} alt="" width="100vw" id="avatar" />
+							</a>
+						</div>
+
+						<div id="user-grid-content-text">
+							<p>
+								<a
+									href={`https://anilist.co/user/${group.anilist_username}`}
+									target="_blank"
+									title={String(group.anilist_id)}
+									use:tooltip
+								>
+									@{group.name}
+								</a>
+								{#if group && group.badge}
+									&#8204;
+									<button
+										class="unclickable-button button-badge badge-rainbow"
+										title={group.badge_description}
+										use:tooltip
+										data-tooltip-disable={group.badge_description}
+									>
+										{group.badge}
+									</button>
+								{/if}
+							</p>
+
+							<p>
+								{group.description}
+							</p>
+						</div>
+					</div>
+				</div>
+			{/if}
+		{:catch}
+			<Message message="" loader="ripple" slot>
+				Error parsing group. Please
+				<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+			</Message>
+		{/await}
+	{:else}
+		<Message message="Parsing groups ..." />
+	{/if}
+{:catch}
+	<Message message="" loader="ripple" slot>
+		Error loading group. Please
+		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+	</Message>
+{/await}
+
+<style>
+	#user-grid-content {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+		background-color: rgba(0, 0, 0, 0.468);
+		color: #d8d8d8;
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	#user-grid-avatar {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#avatar {
+		border-radius: 8px;
+	}
+
+	/* .click-item {
+		margin: 0 0.625rem;
+	} */
+
+	#user-grid {
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+
+	#cover-image {
+		visibility: hidden;
+		height: 4.5em;
+	}
+</style>